<template>
    <!-- 头部信息 -->
    <HeaderView title="注册中心" :hasBack='false' path=""></HeaderView>

    <!-- 表单项 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="name"
        name="name"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
        autocomplete="true"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        autocomplete="true"
        :rules="[{ required: true, message: '密码长度6-10位,由数字和字母组成', pattern: /^[a-zA-Z0-9]{3,6}$/ }]"
      />
      <van-field
        v-model="password_confirmation"
        type="password"
        name="password_confirmation"
        label="确认密码"
        placeholder="确认密码"
        autocomplete="true"
        :rules="[{ required: true, message: '密码长度6-10位,由数字和字母组成', pattern: /^[a-zA-Z0-9]{3,6}$/ }]"
        @blur="inputBlur"
        :error-message="conPwdMsg"
        :clearable="true"
        @update:model-value="updatePwd"
        @clear="() => conPwdMsg = '密码长度6-10位,由数字和字母组成'"
      />
      <van-field
        v-model="email"
        type="email"
        name="email"
        label="邮箱"
        placeholder="请填写邮箱"
        autocomplete="true"
        :rules="[{ required: true, message: '邮箱格式不正确', pattern: /^([a-zA-Z0-9])+\@(([a-zA-Z0-9])+\.)+([a-zA-Z]{2,4})+$/ }]"
      />

      <router-link to="/login" class="loginRegister">已有账号, 立即登录</router-link>

      <div style="margin: 16px;">
        <van-button round block type="success" native-type="submit">提交</van-button>
      </div>
    </van-form>
</template>

<script lang="ts" setup>
import HeaderView from '@/components/Header/IndexView.vue'
import { ref } from 'vue'
import { UserRegister } from '@/api/loginRegister'
import { RegisterType } from '@/type/loginRegister'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const name = ref('')
const password = ref('')
const password_confirmation = ref('')
const email = ref('')
const conPwdMsg = ref('') // 确认密码提示信息

// 注册
const onSubmit = async (values: RegisterType) => {
  const res = await UserRegister({
    name: values.name,
    email: values.email,
    password: values.password,
    password_confirmation: values.password_confirmation
  })
  console.log(res)
  console.log(values)

  try {
    if (res.status === 201) {
      showToast({
        type: 'success',
        message: '注册成功',
        duration: 1000,
        forbidClick: true,
        onClose: () => {
          router.push('/login')
          name.value = ''
          password.value = ''
          password_confirmation.value = ''
          email.value = ''
        }
      })
    }
  } catch (error) {
    console.log(error)
  }
}

// 判断两次输入的密码是否一致
const inputBlur = () => {
  if (password.value !== '' && password_confirmation.value !== '' && password.value !== password_confirmation.value) {
    conPwdMsg.value = '两次输入的密码不一致'
  }
}

// 如果确认密码输入框内容为空 则变化提示信息
const updatePwd = (value: string) => {
  if (value === '') {
    conPwdMsg.value = '密码长度6-10位,由数字和字母组成'
  }
}
</script>

<style lang="scss" scoped>
@import './common.scss';
</style>

1440 -
